import CommonTable from "@/pages/OrderModule/common/components/CommonTable/components/CommonTable";
import CommonText from "@/pages/OrderModule/common/components/CommonText/CommonText";
import { Alert, Button, Space, Tag, Popconfirm, message } from "antd";
import { memo, useState, useEffect } from "react";
import AddIntelligentExpress from "./AddIntelligentExpress";
import CommonLoading from "@/components/CommonLoading";
import { expressStrategyList, expressStrategyStatus, deleteExpressStrategyOp } from "../../service";
import { labelColorMap } from "@/utils/config";

const renderAlertMsg = () => {
	return (
		<div>
			<div>1、智能快递，如果是自动策略的执行，只对“<span style={{ color: '#ff2d51' }}>无快递</span>”的订单有效；如果是手动策略，则对“<span style={{ color: '#ff2d51' }}>已有快递”和“无快递</span>”的订单都有效</div>
			<div>2、价格最低，则会对对应发货仓的订单，选择最便宜的快递；</div>
			<div>3、指定快递，则会对对应发货仓的订单，默认选择该快递；</div>
			<div>
				4、如果对应发货仓的订单，快递条件不满足当前的指定快递，比如地址超区、仓库未支持、快递未开启等，则快递会选择不成功，然后执行下一个优先级的规则。
			</div>
		</div>
	);
};

//快递规则
const ruleMap = {
	1: "指定快递",
	2: "价格最低"
};

const TabIntelligentExpress = ({ type }) => {
	const [tableData, setTableData] = useState([]); //表格数据
	const [visible, setVisible] = useState(false); //新增/编辑弹窗
	const [visibleType, setVisibleType] = useState("add"); //弹窗的状态
	const [recordData, setRecordData] = useState({}); //单行的数据
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		if (type == 3) {
			getExpressStrategyList();
		}
	}, [type]);

	//查询表格数据
	const getExpressStrategyList = async () => {
		setLoading(true);
		setTableData([]);
		const { success, data = [] } = await expressStrategyList({
			current: 1,
			size: 500
		});
		if (success) {
			setTableData(data);
		}
		setLoading(false);
	};

	//修改状态
	const handleUpdateStatus = async record => {
		setLoading(true);
		const { msg = "", success } = await expressStrategyStatus({ id: record.id, status: record.status == 1 ? 0 : 1 });
		if (success) {
			message.success(msg);
			getExpressStrategyList();
		}
		setLoading(false);
	};

	//删除当前数据
	const handleDeleteItems = async record => {
		setLoading(true);
		const { msg = "", success } = await deleteExpressStrategyOp({ id: record.id });
		if (success) {
			message.success(msg);
			getExpressStrategyList();
		}
		setLoading(false);
	};

	//单行点击编辑
	const handleEditItem = (record, type) => {
		setVisible(true);
		setRecordData(record);
		setVisibleType(type);
	};

	const tableColumns = [
		{
			title: "序号",
			dataIndex: "index",
			key: "index",
			width: 60,
			render: (t, r, i) => i + 1
		},
		{
			title: "智能快递规则名称",
			dataIndex: "name",
			key: "name",
			width: 100
		},
		{
			title: "优先级",
			dataIndex: "level",
			key: "level",
			width: 60
		},
		{
			title: "快递规则",
			dataIndex: "rule",
			key: "rule",
			width: 60,
			render: (text, r, i) => <span>{ruleMap[text]}</span>
		},
		{
			title: "具体快递",
			dataIndex: "expressName",
			key: "expressName",
			width: 60
		},
		{
			title: "指定店铺",
			dataIndex: "ecStoreNames",
			key: "ecStoreNames",
			width: 60,
			render(text) {
				return <div>{text.length ? text.join("，") : "/"}</div>;
			}
		},
		{
			title: "包含标签",
			dataIndex: "labelConfigList",
			key: "labelConfigList",
			width: 60,
			render(text) {
				return (
					<>
						{text.length
							? text.map(item => (
									<Tag style={{ marginBottom: "2px" }} key={item.id} color="gold">
										{labelColorMap[item.name] ? labelColorMap[item.name] : item.name}
									</Tag>
								))
							: "/"}
					</>
				);
			}
		},
		{
			title: "包含订单仓库",
			dataIndex: "warehouseNames",
			key: "warehouseNames",
			width: 60
		},
		{
			title: "最新设置时间",
			dataIndex: "updateTime",
			key: "updateTime",
			width: 60
		},

		{
			title: "是否开启",
			dataIndex: "status",
			key: "status",
			width: 60,
			render(value) {
				return <CommonText text={value ? "已开启" : "未开启"} type={value ? "success" : "error"} />;
			}
		},
		{
			title: "操作",
			key: "index",
			width: 120,
			render: (text, record) => {
				return (
					<>
						<Button onClick={() => handleEditItem(record, "edit")} type="link" size="small">
							编辑
						</Button>
						<Popconfirm
							title={`确定${record.status == 1 ? "关闭" : "开启"}?`}
							onConfirm={() => handleUpdateStatus(record)}
							okText="确定"
							cancelText="取消"
						>
							<Button type="link" size="small">
								{record.status == 1 ? "关闭" : "开启"}
							</Button>
						</Popconfirm>
						<Popconfirm title="确定删除?" onConfirm={() => handleDeleteItems(record)} okText="确定" cancelText="取消">
							<Button type="link" size="small">
								删除
							</Button>
						</Popconfirm>
					</>
				);
			}
		}
	];

	//新建/编辑弹窗props
	const AddIntelligentExpressProps = {
		visible,
		type: visibleType,
		recordData,
		handleCancel() {
			setVisible(false);
			setVisibleType("add");
			setRecordData({});
		},
		handleOk() {
			getExpressStrategyList();
			setVisible(false);
			setVisibleType("add");
			setRecordData({});
		}
	};

	return (
		<Space direction="vertical" size={20}>
			<Alert message={renderAlertMsg()} type="info" showIcon />
			<Button onClick={() => setVisible(true)}>新增智能快递</Button>
			<CommonTable columns={tableColumns} dataSource={tableData} pagination={false} scroll={{ y: 500 }} rowKey={"id"} />
			{visible && <AddIntelligentExpress {...AddIntelligentExpressProps} />}
			<CommonLoading loading={loading} />
		</Space>
	);
};
export default memo(TabIntelligentExpress);
